<template>
  <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
  <van-tabs v-model:active="active" sticky>
    <van-tab title="全部" name="all"></van-tab>
    <van-tab title="待支付" name="payment"></van-tab>
    <van-tab title="待发货" name="delivery"></van-tab>
    <van-tab title="待收货" name="received"></van-tab>
    <van-tab title="待评价" name="comment"></van-tab>
  </van-tabs>
  <div class="order-list">
    <my-order-item :order-list="list" v-if="list.length > 0"></my-order-item>
  </div>
</template>
<script>
import { MyOrderItem } from '@/components/MyOrderItem'
import { getMyOrderList } from '@/api/cart'
export default {
  name: 'MyorderIndex',
  data() {
    return {
      active: this.$route.query.dataType || 'all',
      page: '7',
      list: [] // 订单列表
    }
  },
  methods: {
    // 获取订单信息
    async getOrderList() {
      const {
        data: {
          list: { data: listdata }
        }
      } = await getMyOrderList(this.active, this.page)
      listdata.forEach((item) => {
        item.total_num = 0
        item.goods.forEach((goods) => {
          item.total_num += goods.total_num
        })
      })
      this.list = listdata
    }
  },
  watch: {
    active: {
      immediate: true,
      handler() {
        this.getOrderList()
      }
    }
  },
  component: {
    MyOrderItem
  }
}
</script>
<style scoped>
:deep(.van-tabs__line) {
  background: red;
}

.order-list {
  margin: 20px;
}
</style>
